<template>
  <div class="main">
    <!-- 假勤管理 -->
    <van-tabs v-model:active="active">
      <!-- 我的休假 -->
      <van-tab title="我的休假">
        <van-dropdown-menu>
          <van-dropdown-item v-model="project" :options="projectOption" />
          <van-dropdown-item v-model="date" :options="dateOption" />
          <van-dropdown-item v-model="value3" :options="option3" />
          <div class="screening">
              <i class="iconfont icon-shaixuan custom_icon"></i>
              <span>筛选</span>
          </div>
        </van-dropdown-menu>
        <!-- item -->
        <van-pull-refresh v-model="loading" @refresh="onRefresh"> 
          <div class="my_vacation" v-for="item in myVacation" :key="item.id">
            <div class="status">
              <h4>{{ item.kinds }}</h4>
              <div class="audit_status" :class="{ 'red': item.status === '不通过' }">{{ item.status }}</div>
            </div>
            <div class="details">
              <p>开始时间:{{ item.start }}</p>
              <p>结束时间:{{ item.end }}</p>
              <p>休假总时长:{{ item.time }}小时</p>
            </div>
            <div class="operation" v-if="item.status === '通过'">
              <van-button plain type="success" size="mini">变更</van-button>
              <van-button plain type="success" size="mini">销毁</van-button>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
      <!-- 团队休假 -->
      <van-tab title="团队休假">
        <van-dropdown-menu>
          <van-dropdown-item v-model="employee" :options="employeeOption" />
          <van-dropdown-item v-model="relationship" :options="relationshipOption" />
          <van-dropdown-item v-model="value3" :options="option3" />
          <div class="screening">
              <i class="iconfont icon-shaixuan custom_icon"></i>
              <span>筛选</span>
          </div>
        </van-dropdown-menu>
        <!-- item -->
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div class="team_vacation" v-for="item in teamVacation" :key="item.id">
          <div class="img">
            <van-image round width="1.3rem" height="1.3rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          </div>
          <div class="team_details">
            <div class="status">
              <h4>{{ item.employee }}</h4>
              <div class="audit_status" :class="{ 'draft': item.status === '草稿', 'approval': item.status === '审批中' }"
                v-if="item.status">{{ item.status }}</div>
            </div>
            <div class="details">
              <p>休假项目:{{ item.kinds }}</p>
              <p>开始时间:{{ item.start }}</p>
              <p>结束时间:{{ item.end }}</p>
              <p>休假总时长:{{ item.day }}天</p>
            </div>
          </div>
        </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

//tab
let active = ref('1')

//下拉菜单
const project = ref(0);
const date = ref(0);
const value3 = ref(0);
const projectOption = [
  { text: '休假项目', value: 0 },
];
const dateOption = [
  { text: '休假日期', value: 0 },
];
const option3 = [
  { text: '筛选', value: 0 },
];


const employee = ref(0)
const employeeOption = [{ text: '员工', value: 0 }]
const relationship = ref(0)
const relationshipOption = [{ text: '直接汇报关系', value: 0 }]
const myVacation = reactive([])
myVacation.push(...[
  {
    id: '02421421',
    kinds: '调休假',
    status: '通过',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    time: '3.5'
  },
  {
    id: '024214212',
    kinds: '年假',
    status: '通过',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    time: '0.5'
  },
  {
    id: '024214231',
    kinds: '年假',
    status: '不通过',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    time: '0.5'
  },
  {
    id: '024214231',
    kinds: '调休假',
    status: '不通过',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    time: '3.5'
  }
])
const teamVacation = reactive([])
teamVacation.push(...[
  {
    id: '02421421',
    employee: '张三',
    kinds: '调休假',
    status: '草稿',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    day: '3.5'
  },
  {
    id: '024214211',
    employee: '张三',
    kinds: '年假',
    status: '审批中',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    day: '3.5'
  },
  {
    id: '024214212',
    employee: '张三',
    kinds: '调休假',
    status: '通过',
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    day: '3.5'
  },
  {
    id: '024214213',
    employee: '张三',
    kinds: '事假',
    status: null,
    start: '2024-02-22 08:30',
    end: '2024-02-22 08:30',
    day: '3.5'
  }
])

const loading = ref(false);
    const onRefresh = () => {
      console.log(1);
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    };
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  background-color: #F2F2F2;

  :deep(.van-dropdown-menu) {
    position: relative;
  }

  .screening {
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #333;
    height: 48px;
    width: 100px;
    line-height: 40px;
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 0;

    i {
      font-size: 22px;
    }
  }

  :deep(.van-button) {
    padding: 5px 20px;
    font-size: 14px;
  }

  .my_vacation,
  .team_vacation {
    background-color: #fff;
    padding: 5px 0 0;
    margin-bottom: 8px;

    .status,
    .details {
      padding: 10px 6px 0;
    }

    .status {
      display: flex;
      justify-content: space-between;


      .audit_status {
        font-size: 14px;
        width: 60px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: $theme_bg;
        color: $theme_icon;
        border-radius: 18px;

        &.red {
          color: red;
          background-color: #FFCBCB;
        }

        &.draft {
          background-color: #D3D3D3;
          color: #6D6D6D;
        }

        &.approval {
          background-color: #FFE3A6;
          color: #FF9400;
        }
      }
    }

    .details {
      font-size: 15px;
      border-bottom: 1px solid #F2F2F2;

      p {
        padding-bottom: 5px;
      }
    }

    .operation {
      display: flex;
      justify-content: flex-end;
      padding: 5px 10px;
    }
  }

  .team_vacation {
    display: flex;
    padding: 8px;

    .img {
      width: 60px;
      padding-top: 12px;
    }

    .team_details {
      flex: 1;

      .details {
        border-bottom: 0;
      }
    }
  }
}

:deep(.van-tabs__line) {
  width: 55px;
  height: 2px;
  background: $theme_icon;
}

:deep(.van-tab--active) {
  font-weight: 400;
  color: $theme_icon;
}
</style>